<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>关于 - 克苏鲁秘语</title>
  <script src="js/tailwindcss.js"></script>
  <link href="css/font-awesome.min.css" rel="stylesheet">
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          colors: {
            primary: '#8B5CF6',
            secondary: '#EC4899',
            accent: '#10B981',
            dark: '#111827',
            light: '#F9FAFB',
            mythic: {
              50: '#F3F4F6',
              100: '#E5E7EB',
              200: '#D1D5DB',
              300: '#9CA3AF',
              400: '#6B7280',
              500: '#4B5563',
              600: '#374151',
              700: '#1F2937',
              800: '#111827',
              900: '#030712',
            },
            cosmic: {
              50: '#F5F3FF',
              100: '#EDE9FE',
              200: '#DDD6FE',
              300: '#C4B5FD',
              400: '#A78BFA',
              500: '#8B5CF6',
              600: '#7C3AED',
              700: '#6D28D9',
              800: '#5B21B6',
              900: '#4C1D95',
            }
          },
          fontFamily: {
            mythos: ['Georgia', 'serif'],
            cosmic: ['"Arial Narrow"', 'sans-serif'],
          },
          backgroundImage: {
            'mythic-pattern': "url('https://picsum.photos/id/1048/1200/800')",
            'cosmic-void': "url('https://picsum.photos/id/1019/1200/800')",
          },
          animation: {
            'float': 'float 6s ease-in-out infinite',
            'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
            'glow': 'glow 2s ease-in-out infinite alternate',
          },
          keyframes: {
            float: {
              '0%, 100%': { transform: 'translateY(0)' },
              '50%': { transform: 'translateY(-10px)' },
            },
            glow: {
              '0%': { textShadow: '0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6' },
              '100%': { textShadow: '0 0 10px #fff, 0 0 20px #fff, 0 0 30px #0073e6, 0 0 40px #0073e6' },
            }
          }
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
      }
      .text-shadow-glow {
        text-shadow: 0 0 10px rgba(139, 92, 246, 0.7);
      }
      .bg-blur {
        backdrop-filter: blur(8px);
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .animate-float-slow {
        animation: float 8s ease-in-out infinite;
      }
    }
  </style>
</head>
<body class="bg-mythic-50 dark:bg-mythic-900 text-mythic-800 dark:text-mythic-100 transition-colors duration-300 font-mythos">
  <!-- 导航栏 -->
  <header class="fixed w-full top-0 z-50 transition-all duration-300" id="navbar">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between bg-white/80 dark:bg-mythic-800/80 bg-blur">
      <a href="index.html" class="flex items-center space-x-2">
        <span class="text-2xl text-primary dark:text-cosmic-400 font-bold animate-pulse-slow">
          <i class="fa fa-eye"></i>
        </span>
        <span class="text-xl font-cosmic tracking-wider">克苏鲁秘语</span>
      </a>
      
      <!-- 桌面导航 -->
      <nav class="hidden md:flex items-center space-x-8">
        <a href="index.html" class="hover:text-primary dark:hover:text-cosmic-400 transition-colors duration-300">首页</a>
        <a href="tags.html" class="hover:text-primary dark:hover:text-cosmic-400 transition-colors duration-300">标签云</a>
        <a href="search.html" class="hover:text-primary dark:hover:text-cosmic-400 transition-colors duration-300">搜索</a>
        <a href="about.html" class="hover:text-primary dark:hover:text-cosmic-400 transition-colors duration-300">关于</a>
      </nav>
      
      <!-- 移动端菜单按钮 -->
      <button class="md:hidden text-2xl" id="menu-toggle">
        <i class="fa fa-bars"></i>
      </button>
      
      <!-- 主题切换按钮 -->
      <button id="theme-toggle" class="ml-4 p-2 rounded-full hover:bg-mythic-200 dark:hover:bg-mythic-700 transition-colors duration-300">
        <i class="fa fa-moon-o dark:hidden"></i>
        <i class="fa fa-sun-o hidden dark:inline-block"></i>
      </button>
    </div>
    
    <!-- 移动端导航菜单 -->
    <div id="mobile-menu" class="hidden md:hidden bg-white dark:bg-mythic-800">
      <div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
        <a href="index.html" class="hover:text-primary dark:hover:text-cosmic-400 transition-colors duration-300 py-2">首页</a>
        <a href="tags.html" class="hover:text-primary dark:hover:text-cosmic-400 transition-colors duration-300 py-2">标签云</a>
        <a href="search.html" class="hover:text-primary dark:hover:text-cosmic-400 transition-colors duration-300 py-2">搜索</a>
        <a href="about.html" class="hover:text-primary dark:hover:text-cosmic-400 transition-colors duration-300 py-2">关于</a>
      </div>
    </div>
  </header>

  <!-- 主要内容 -->
  <main class="container mx-auto px-4 pt-24 pb-16">
    <!-- 页面标题 -->
    <section class="mb-12 text-center">
      <h1 class="text-[clamp(1.75rem,5vw,3rem)] font-bold text-primary dark:text-cosmic-400 mb-4">关于克苏鲁秘语</h1>
      <p class="text-lg text-mythic-600 dark:text-mythic-300 max-w-3xl mx-auto">探索神话与未知的边界</p>
    </section>
    
    <!-- 关于内容 -->
    <section class="bg-white dark:bg-mythic-800 rounded-xl shadow-md p-8 mb-12">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div class="md:col-span-2">
          <h2 class="text-2xl font-bold mb-6 text-primary dark:text-cosmic-400">关于博客</h2>
          
          <p class="text-mythic-600 dark:text-mythic-300 mb-6">
            克苏鲁秘语是一个专注于探索埃及希腊神话与克苏鲁神话交叉领域的博客。我们致力于揭示不同文化中神话体系的相似性和关联性，探索人类对未知恐惧的共通表达。
          </p>
          
          <p class="text-mythic-600 dark:text-mythic-300 mb-6">
            在这里，你将发现关于古埃及神话、希腊神话和克苏鲁神话的深入分析与比较研究。我们的文章探讨这些神话体系中的神祇、故事和象征，揭示它们之间可能存在的神秘联系。
          </p>
          
          <p class="text-mythic-600 dark:text-mythic-300 mb-6">
            我们相信，通过跨文化的神话比较研究，可以更好地理解人类文化的深层结构，以及我们对宇宙和超自然现象的永恒探索。
          </p>
          
          <h2 class="text-2xl font-bold mb-6 text-primary dark:text-cosmic-400">关于博主</h2>
          
          <p class="text-mythic-600 dark:text-mythic-300 mb-6">
            博主克苏鲁学者是一位神话学研究者，专注于克苏鲁神话与古埃及、古希腊神话的交叉研究。拥有文学与考古学背景，曾在多个学术期刊发表相关论文。
          </p>
          
          <p class="text-mythic-600 dark:text-mythic-300 mb-6">
            出于对神话学的热爱，博主创建了"克苏鲁秘语"博客，希望通过这个平台与更多人分享神话学研究的乐趣，探索不同文化中神话的奥秘与联系。
          </p>
          
          <h2 class="text-2xl font-bold mb-6 text-primary dark:text-cosmic-400">联系方式</h2>
          
          <div class="space-y-4">
            <div class="flex items-center">
              <div class="w-12 h-12 rounded-full bg-primary/10 dark:bg-cosmic-600/20 flex items-center justify-center text-primary dark:text-cosmic-400">
                <i class="fa fa-envelope"></i>
              </div>
              <div class="ml-4">
                <h3 class="font-bold">电子邮件</h3>
                <p class="text-mythic-600 dark:text-mythic-300">contact@cthulhumythosblog.com</p>
              </div>
            </div>
            
            <div class="flex items-center">
              <div class="w-12 h-12 rounded-full bg-primary/10 dark:bg-cosmic-600/20 flex items-center justify-center text-primary dark:text-cosmic-400">
                <i class="fa fa-twitter"></i>
              </div>
              <div class="ml-4">
                <h3 class="font-bold">Twitter</h3>
                <p class="text-mythic-600 dark:text-mythic-300">@CthulhuScholar</p>
              </div>
            </div>
            
            <div class="flex items-center">
              <div class="w-12 h-12 rounded-full bg-primary/10 dark:bg-cosmic-600/20 flex items-center justify-center text-primary dark:text-cosmic-400">
                <i class="fa fa-github"></i>
              </div>
              <div class="ml-4">
                <h3 class="font-bold">GitHub</h3>
                <p class="text-mythic-600 dark:text-mythic-300">github.com/CthulhuScholar</p>
              </div>
            </div>
          </div>
        </div>
        
        <div>
          <div class="bg-mythic-50 dark:bg-mythic-700 rounded-xl p-6 mb-6">
            <div class="text-center">
              <img src="https://picsum.photos/id/1005/200/200" alt="博主头像" class="w-32 h-32 rounded-full mx-auto mb-4 object-cover border-4 border-primary/20 dark:border-cosmic-600/20">
              <h3 class="font-bold text-xl mb-2">克苏鲁学者</h3>
              <p class="text-mythic-600 dark:text-mythic-300 mb-4">神话学研究者</p>
              <div class="flex justify-center space-x-4">
                <a href="#" class="text-mythic-500 dark:text-mythic-400 hover:text-primary dark:hover:text-cosmic-400 transition-colors duration-300">
                  <i class="fa fa-twitter"></i>
                </a>
                <a href="#" class="text-mythic-500 dark:text-mythic-400 hover:text-primary dark:hover:text-cosmic-400 transition-colors duration-300">
                  <i class="fa fa-github"></i>
                </a>
                <a href="#" class="text-mythic-500 dark:text-mythic-400 hover:text-primary dark:hover:text-cosmic-400 transition-colors duration-300">
                  <i class="fa fa-linkedin"></i>
                </a>
              </div>
            </div>
          </div>
          
          <div class="bg-mythic-50 dark:bg-mythic-700 rounded-xl p-6 mb-6">
            <h3 class="font-bold text-lg mb-4 flex items-center">
              <i class="fa fa-trophy text-primary dark:text-cosmic-400 mr-2"></i>
              博客成就
            </h3>
            <ul class="space-y-3">
              <li class="flex items-center">
                <div class="w-8 h-8 rounded-full bg-primary/10 dark:bg-cosmic-600/20 flex items-center justify-center text-primary dark:text-cosmic-400 mr-3">
                  <i class="fa fa-star"></i>
                </div>
                <span>2024年度最佳神话学博客</span>
              </li>
              <li class="flex items-center">
                <div class="w-8 h-8 rounded-full bg-primary/10 dark:bg-cosmic-600/20 flex items-center justify-center text-primary dark:text-cosmic-400 mr-3">
                  <i class="fa fa-users"></i>
                </div>
                <span>超过10,000名月度读者</span>
              </li>
              <li class="flex items-center">
                <div class="w-8 h-8 rounded-full bg-primary/10 dark:bg-cosmic-600/20 flex items-center justify-center text-primary dark:text-cosmic-400 mr-3">
                  <i class="fa fa-comment"></i>
                </div>
                <span>5,000+条有价值评论</span>
              </li>
            </ul>
          </div>
          
          <div class="bg-mythic-50 dark:bg-mythic-700 rounded-xl p-6">
            <h3 class="font-bold text-lg mb-4 flex items-center">
              <i class="fa fa-bookmark text-primary dark:text-cosmic-400 mr-2"></i>
              推荐资源
            </h3>
            <ul class="space-y-3">
              <li>
                <a href="#" class="text-mythic-600 dark:text-mythic-300 hover:text-primary dark:hover:text-cosmic-400 transition-colors duration-300 flex items-center">
                  <i class="fa fa-external-link-square mr-2"></i>
                  《克苏鲁神话百科全书》
                </a>
              </li>
              <li>
                <a href="#" class="text-mythic-600 dark:text-mythic-300 hover:text-primary dark:hover:text-cosmic-400 transition-colors duration-300 flex items-center">
                  <i class="fa fa-external-link-square mr-2"></i>
                  《埃及神话词典》
                </a>
              </li>
              <li>
                <a href="#" class="text-mythic-600 dark:text-mythic-300 hover:text-primary dark:hover:text-cosmic-400 transition-colors duration-300 flex items-center">
                  <i class="fa fa-external-link-square mr-2"></i>
                  《希腊神话指南》
                </a>
              </li>
              <li>
                <a href="#" class="text-mythic-600 dark:text-mythic-300 hover:text-primary dark:hover:text-cosmic-400 transition-colors duration-300 flex items-center">
                  <i class="fa fa-external-link-square mr-2"></i>
                  《跨文化神话比较研究》
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 订阅区域 -->
    <section class="bg-gradient-to-r from-primary to-cosmic-700 dark:from-cosmic-800 dark:to-cosmic-900 rounded-xl shadow-lg p-8 text-white mb-12">
      <div class="max-w-3xl mx-auto text-center">
        <h2 class="text-2xl font-bold mb-4">订阅克苏鲁秘语</h2>
        <p class="mb-6 text-white/80">获取最新的神话学研究、神秘传说和跨文化比较分析</p>
        <form class="flex flex-col sm:flex-row gap-3 max-w-xl mx-auto">
          <input type="email" placeholder="您的邮箱地址" class="flex-1 px-4 py-3 rounded-lg text-mythic-800 focus:outline-none focus:ring-2 focus:ring-white">
          <button type="submit" class="px-6 py-3 bg-white text-primary dark:text-cosmic-600 font-bold rounded-lg hover:bg-mythic-100 transition-colors duration-300">
            立即订阅
          </button>
        </form>
        <p class="mt-4 text-sm text-white/60">我们尊重您的隐私，绝不会分享您的个人信息</p>
        
        <!-- 添加主题切换脚本 -->
        <script>
          // 主题切换功能
          const themeToggle = document.getElementById('theme-toggle');
          const htmlElement = document.documentElement;
          const mobileMenu = document.getElementById('mobile-menu');
          const menuToggle = document.getElementById('menu-toggle');
        
          // 检查本地存储中的主题偏好
          if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            htmlElement.classList.add('dark');
          } else {
            htmlElement.classList.remove('dark');
          }
        
          // 主题切换按钮点击事件
          themeToggle.addEventListener('click', () => {
            htmlElement.classList.toggle('dark');
            localStorage.theme = htmlElement.classList.contains('dark') ? 'dark' : 'light';
          });
        
          // 移动端菜单切换
          menuToggle.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
          });
        </script>
      </div>
    </section>
  </main>
</body>
</html>
